<template>
  <div class="activity-detail">
    <div class="title">{{ obj.title }}</div>
    <div class="content" v-html="obj.details" />
    <van-button
      v-if="obj.isApply === false && obj.isExpired === false"
      class="btn"
      size="normal"
      type="info"
      @click="goApply"
    >立即报名</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$axios({
        method: 'post',
        url: `/activity/details?activityId=${this.$route.query.activityId}`
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.obj = res.data.data
        }
      })
    },
    formatTime(time) {
      return (time || '').slice(0, 10).replace(/-/g, '.')
    },
    goApply() {
      const activityId = this.obj.activityId
      const cost = this.obj.moneyCost
      // 这里需要判断是否完成信息，从localstorage里取吧，然后跳转 /addInfo
      // const isBind = false
      this.$axios({
        method: 'post',
        url: `/user/info/check`
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          const { isBind } = res.data.data
          // 如果资料已完成  开始走报名
          if (isBind) {
            // 如果是0元直接走购买流程
            if (Number(cost) === 0) {
              this.$WechatPayActivity(activityId, () => {
                console.log(1, '购买成功')
                window.location.href = `/nanc-h5/activityInfo?activityId=${activityId}&isPay=true`
              })
              return
            }
            this.$router.push({
              name: 'paymentInfo',
              query: {
                activityId: activityId,
                cost: cost
              }
            })
          } else {
            this.$router.push({
              name: 'addInfo',
              query: {
                activityId: activityId,
                cost: cost
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style>
.activity-detail img,
.activity-detail video {
  max-width: 100%;
}
.activity-detail table {
  width: 100% !important;
}
</style>
<style scoped>
.activity-detail {
  width: 100%;
  padding-bottom: 50px;
  background: #fff;
  padding: 10px 5px;
  box-sizing: border-box;
}
.title {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 24px;
  padding: 16px;
}
.content {
  width: 98%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.content img {
  max-width: 100%;
}
.btn {
  width: 87.2%;
  height: 45px;
  line-height: 45px;
  position: fixed;
  bottom: 20px;
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  box-shadow: 0px 2px 6px 0px rgba(25, 144, 255, 0.4);
  border-radius: 4px;
  transform: translateX(-50%);
  left: 50%;
}
</style>
